<template>
	<view class="u-p-l-10 u-p-r-10">
		<!-- <u-navbar :is-back="false"> -->
			<!-- <view style="display: flex;justify-content: center;align-items: center;"> -->
				<!-- <view class="u-p-20" @click="location"> -->
					<!-- {{ vuex_city == '' ? '选择' : vuex_city }} -->
					<!-- <u-icon name="arrow-down-fill" class="u-p-l-10" color="#515356"></u-icon> -->
				<!-- </view> -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- <u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false"
					:clearabled="true" :disabled="true" style="width: 380rpx;" @click="search"></u-search> -->
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- <u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false"
					:clearabled="true" :disabled="true" style="width: 580rpx;" @click="search"></u-search> -->
				<!-- #endif -->
			<!-- </view> -->
		<!-- </u-navbar> -->
		<view>
			<!-- 流量主-腾讯banner广告 -->
			<!-- <ad unit-id="adunit-fcfdcc4d7095b6b1" ad-intervals="30"></ad> -->
			<!-- 轮播图 -->
			<!-- #ifndef MP-WEIXIN -->
			<!-- <u-swiper :list="swiperList" height="350"></u-swiper> -->
			<!-- #endif -->
			<u-swiper :list="swiperList" height="350" @click="moreInfo" name="advertUrl"></u-swiper>
		</view>
		<view>
			<view class="rowClass">
				<u-row>
					<u-col span="3" text-align="center" v-for="(item, index) in navList" :key="index">
						<view class="u-padding-20" @tap="clickNav(item)" hover-class="hoverClass">
							<image :src="'/static/img/index/' + item.cssClass + '.png'"
								style="width: 90rpx;height: 90rpx;" mode="widthFix"></image>
							<view class="tabName">{{ item.dictLabel }}</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-gap height="10"></u-gap>
			<!-- <view @click="notice">
				<u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon
				bg-color="#fff" :duration="5000" border-radius="15"></u-notice-bar>
			</view> -->
			<u-gap height="5"></u-gap>
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<waterfall-item :item="item"  v-for="(item, index) in leftList" :key="item.id"></waterfall-item>
				</template>
				<template v-slot:right="{ rightList }">
					<waterfall-item :item="item"  v-for="(item, index) in rightList" :key="item.id"></waterfall-item>
				</template>
			</u-waterfall>
		</view>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList"
			style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
		<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
		<u-no-network></u-no-network>
		<!-- <view class="buttom">
			<view class="loginType">
				<view class="wechat item">
					<view class="icon"><u-icon size="60" name="server-man" color="#999" @click="server"></u-icon></view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import config from "@/common/config.js";
	import {
		removeURLParameter
	} from "@/common/utils/utils.js"
	import {
		mpLoginByCode,
		getDictType,
		getRoomList,
		getAdvertList,
		getShareConfig
	} from "@/common/api.js";
	import WaterfallItem from "@/components/WaterfallItem"


	export default {
		components:{WaterfallItem},
		data() {
			return {
				keyword: '',
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				houseList: [],
				swiperList: [],
				noticeList: [],
				navList: [],
				loadStatus: 'loadmore',
				flowList: [],
				uvCode: uni.getStorageSync('uvCode'),
			}
		},
		onLoad() {
			if (uni.getStorageSync("token")) {
				this.initPage();
			} else {
				if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
					//微信浏览器中
					this.wxLogin();
				} else {
					//普通浏览器中
					this.$u.route({
						url: 'pages/login/account'
					})
				}
			}
			// 流量统计
			// this.appSysFlowInfo();
			// uni.$on('findIndexHouseList', (obj) => {
			// 	// 获取数据
			// 	this.findHouseList(1);
			// })
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 获取数据
			this.findHouseList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取数据
			this.findHouseList(1);
			// 关闭刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			//获取分享配置参数
			getShareConfig() {
				const path = window.location.href
				getShareConfig({
					url: path
				}).then(res => {
					this.$wx.config({
						debug: false,
						appId: 'wxd30a3cbbd5789f3b', // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['onMenuShareTimeline',
							'onMenuShareAppMessage', 'getLocation'
						] // 必填，需要使用的JS接口列表
					});

					wx.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function(res) {
							var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
							var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							var speed = res.speed; // 速度，以米/每秒计
							var accuracy = res.accuracy; // 位置精度
						}
					});

					this.$wx.onMenuShareAppMessage({
						title: this.shareTitle, // 分享标题
						desc: this.shareTitle, // 分享描述
						link: res.data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.room.faceUrl, // 分享图标
						success: function(res) {
							console.log("设置成功了")
						}

					})

					this.$wx.onMenuShareTimeline({
						title: this.shareTitle, // 分享标题
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.room.faceUrl, // 分享图标
						success: function(res) {
							console.log("设置成功了")
							// 设置成功
						}
					})
				})
			},
			getAdvertList() {
				getAdvertList().then(res => {
					this.swiperList = res.rows
				})
			},
			getRoomType() {
				getDictType({
					dictType: "rental_type"
				}).then(res => {
					this.navList = res.data
				})
			},
			async wxLogin() {
				const params = new URLSearchParams(window.location.search);
				const paramCode = params.get('code');
				const noPararmUrl = removeURLParameter(window.location.href, 'code');
				const code = uni.getStorageSync("code")
				if (!code && paramCode) {
					const result = await this.doMpLogin(paramCode);
					if (result.code === 200) {
						window.location.replace(noPararmUrl)
						uni.setStorageSync("code", paramCode);
						uni.setStorageSync("token", result.data.token);
						uni.setStorageSync("userInfo", result.data.userInfo);
						console.log(uni.getStorageSync("token"), 888999000)
						this.initPage();
					}
				} else {
					const redirctUrl =
						"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd30a3cbbd5789f3b&redirect_uri=https%3A%2F%2Fhouse.guoli.ink&response_type=code&scope=snsapi_userinfo&state=guoli#wechat_redirect";
					window.location.href = redirctUrl;
					return false
				}
			},
			initPage() {
				this.getRoomType();
				// 检查是否已选择城市，如果未选择，跳转到选择城市页面
				// this.checkCity();
				// 获取数据
				this.findHouseList();
				this.getAdvertList();
				//微信js-sdk配置
				if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
					this.getShareConfig()
				}
			},
			doMpLogin(code) {
				return mpLoginByCode({
					code: code
				}).then(res => res);
			},
			checkCity() {
				// 检查是否已选择城市，如果未选择，跳转到选择城市页面
				let lifeData = uni.getStorageSync('lifeData');
				let vuex_city = lifeData.vuex_city

				wx.getLocation({
					type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					success: function(res) {
						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						var speed = res.speed; // 速度，以米/每秒计
						var accuracy = res.accuracy; // 位置精度
						console.log(latitude, longitude)
					}
				});


				// console.log(vuex_city.length);
				// if(!vuex_city || vuex_city.length == 0){
				// 	// 没有token 则跳转到登录
				// 	return this.$u.route('/pages/location/location');
				// }
			},
			location() {
				this.$u.route({
					url: 'pages/location/location',
				})
			},
			search() {
				this.$u.route({
					url: 'pages/search/search',
				})
			},
			notice() {
				this.$u.route({
					url: 'pages/notice/notice'
				})
			},
			findHouseList(type = 0) {
				if (type == 1) {
					this.pageNum = 1
					this.flowList = []
					this.$refs.uWaterfall.clear();
				}
				getRoomList({
					state: 1,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderByColumn: 'update_time,create_time',
					isAsc: 'desc'
				}).then(result => {
					const data = result.rows;
					if (this.pageNum > 1 && data.length < this.pageSize) {
						return this.loadStatus = 'nomore';
					}
					this.flowList = data;
					++this.pageNum
					this.loadStatus = 'loadmore';
				})

			},
			clickSearch() {
				this.$u.route('/pages/search/search');
			},
			
			clickNav(item) {
				this.$u.route({
					url: '/pages/search/searchList',
					params: {
						type: item.dictValue
					}
				})
			},
			code() {
				this.$mytip.toast('请咨询作者')
			},
			appSysFlowInfo() {
				// 流量统计
				let uvCode = uni.getStorageSync("uvCode");
				// let url = "https://sourcebyte.cn/api/flow/upFlow?type=MINI&uvCode=" + uvCode;
				// uni.request({
				//   url: url,
				//   method: "POST",
				//   success: (res) => {
				// 	uni.setStorageSync("uvCode", res.data.data);
				//   },
				// });
			},
			getNoticecList() {
				let url = "/api/notice/findNoticeList";
				this.$u.get(url, {
					pageNum: 1,
					pageSize: 50,
					orderByColumn: 'create_time',
					isAsc: 'desc'
				}).then(obj => {
					let data = obj.rows
					data.filter(item => {
						this.noticeList.push(item.noticeTitle)
					})
				});
			},
			moreInfo() {
				uni.navigateToMiniProgram({
					appId: 'wxbca64173e772915e', // 此为开源字节appid
					path: '/pages/index/index', // 此为开源字节首页路径
					envVersion: "release",
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nomore {
		background-color: $u-bg-color;
	}

	.search {
		width: 54px;
		height: 44px;

		&:active {
			background-color: $u-bg-color;
		}
	}

	.rowClass {
		border-radius: 8px;
		background-color: rgb(255, 255, 255);
		margin-top: 10rpx;
	}

	.hoverClass {
		background-color: #E4E7ED;
	}

	.tabName {
		font-size: 28rpx;
		color: $u-main-color;
	}

	.demo-warter {
		border-radius: 8px;
		margin-top: 30rpx;
		padding: 10rpx;
		background-color: #ffffff;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.item-cover {
		font-size: 55rpx;
		color: $u-type-warning;
	}

	.item-title {
		font-size: 28rpx;
		color: $u-main-color;
		font-weight: bold;
		padding-top: 5rpx;
		padding-left: 10rpx;
	}

	.item-price {
		font-weight: normal;
		font-size: 32rpx;
		color: $u-type-warning;
	}

	.item-desc {
		font-weight: normal;
		font-size: 26rpx;
		color: $u-tips-color;
		padding-bottom: 5rpx;
		padding-left: 10rpx;
	}

	.item-tag {
		font-size: 24rpx;
		color: $u-tips-color;
		margin-top: 3px;
	}

	.buttom {
		.loginType {
			font-size: 14px;
			position: fixed;
			right: 30rpx;
			bottom: 300rpx;
			width: 60px;
			height: 60px;
			padding: 4px;
			cursor: pointer;
			background: #FFF;
			text-align: center;
			line-height: 60px;
			border-radius: 100%;
			-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
		}
	}
</style>